<template>
    <div class="top" :style="{backgroundImage: 'url(' + require('@/assets/image53.png') + ')',backgroundSize:'cover',backgroundPosition:'center'}">
        
        <div class="topcontain">
            <div class="firsttop">
                <svg class="icon" aria-hidden="true" @click="gotolastpage">
          <use xlink:href="#icon-xiangzuojiantou"></use>
    </svg>
    <span >陪护预约</span>
            </div>
            <div class="scendtop">
                <img src="/image41.png" alt="">
                <span>专业化服务</span>
            </div>
            <div class="thirdtop">
                <img src="/image42.png" alt="">
                <span>个性化陪护</span>
            </div>
        </div>
    </div>
    <div class="selectserve">
        <div class="photo" id="photo1">
            <img src="/image52.png" alt="">
        </div>
       
       <div class="selectitem" >初级陪护</div>
        <div class="servemoney">200.00元/天</div>
        <div class="reservation" @click="gotoprimarycompany">立即预约</div>
    </div>
    <div class="selectserve">
        <div class="photo" id="photo2">
            <img src="/image53.png" alt="">
        </div>
       
       <div class="selectitem" >中级陪护</div>
        <div class="servemoney">250.00元/天</div>
        <div class="reservation" @click="gotomiddlecompany">立即预约</div>
    </div>
    <div class="selectserve">
        <div class="photo" id="photo3">
            <img src="/image54.png" alt="">
        </div>
       
       <div class="selectitem" >高级陪护</div>
        <div class="servemoney">300.00元/天</div>
        <div class="reservation" @click="gotohighcompany">立即预约</div>
    </div>
    <div class="selectserve">
        <div class="photo" id="photo4">
            <img src="/image55.png" alt="">
        </div>
       
       <div class="selectitem" >专业陪护</div>
        <div class="servemoney">350-500元/天</div>
        <div class="reservation" @click="gotomajorcompany">立即预约</div>
    </div>
    
       
     
</template>
<script>
import Oldpeople from './oldpeople.vue';

export default{
    methods:{
        gotolastpage(){
            window.history.back()
        },
        gotoprimarycompany(){
            this.$router.push('primarycompany');
        },
        gotomiddlecompany(){
            this.$router.push('middlecompany');
        },
        gotohighcompany(){
            this.$router.push('highcompany');
        },
        gotomajorcompany(){
            this.$router.push('majorcompany');
        },
       
    }
    
}
</script>
<style scoped>

.top{
    position: relative;
    width: 7.88rem;
    height: 5.12rem;
    
}
.firsttop{
    position: absolute;
    top: 0.6rem;
    margin-left: 10px;
   
}
.firsttop span{
    margin-left:2.6rem;
    font-size: 24px;
    color: #ffffff;
    /* font-weight: bold; */


}
.scendtop{
    width: 3.2rem;
    height: .7rem;
    background-image: linear-gradient(to right,rgb(42,130,228),rgb(67,207,124));
   position: absolute;
   top: 110px;
   left: 30px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    
    
}
.scendtop span{
    margin-left: 10px;
    font-size:24px ;
    color: #ffffff;
}
.scendtop img{
    margin-left: 10px;
    width: 28px;
    height: 28px;
}
.thirdtop{
    width:5.52rem ;
    height: .7rem;
    background-image: linear-gradient(to right,rgb(42,130,228),rgb(67,207,124));
   position: absolute;
   top: 170px;
   left: 30px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}
.thirdtop span{
    margin-left: 10px;
    font-size:24px ;
    color: #ffffff;
}
.thirdtop img{
    margin-left: 10px;
    width: 28px;
    height: 28px;
}
.photo{
    margin-left: 10px;
    width: 78px;
    height: 77px;
    display: inline-block;
    border-radius: 10px;
}
.photo img{
    width: 64px;
    height: 64px;
}
.servemoney{
    position: absolute;
    top: 50px;
    left: 100px;
    color: #00BAAD;
    
}
.selectserve{
    margin-top: 10px;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    width: 367px;
    height: 91px;
    box-shadow: 0 0 10px #888;
    margin-left: 30px;
}
.selectitem{
    position: absolute;
    top: 10px;
    font-size: 20px;
    left: 100px;
}
.reservation{
    margin-left: 150px;
    width: 124px;
    height: 29px;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
    border-radius: 20px/20px;
    text-align: center;
    line-height: 29px;
}
#photo1{
    background-color: #91d6d2;
}
#photo2{
    background-color: #cbd8af;
}
#photo3{
    background-color: #d1ac86;
}
#photo4{
    background-color: #eae0bd;
}

</style>